<template>
  <div>
    <input v-focus placeholder="请输入内容" type="text" />
    <div v-color="color">天气真不错啊！ 今天天气针不错！</div>
    <button @click="color = 'skyblue'">换个颜色</button>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        // 页面刷新获得焦点
        el.focus();
      },
    },
    color: {
      // 直接
      inserted(el, binding) {
        // 页面刷新改变颜色
        el.style.color = binding.value;
      },
      // 改变后
      update(el, { value }) {
        // 点击颜色改变
        el.style.color = value;
      },
    },
  },
  data() {
    return {
      color: "yellowgreen",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>